<template>
  <div>
    <app-head></app-head>
    <app-body>
      <div class="release-tea-container">
        <div class="release-tea-container-title">文章发布</div>
        <div class="release-tea-container-form">
          <el-input placeholder="请输入文章名称" v-model="teaItemInfo.teaName"
                    maxlength="30"
                    show-word-limit>
          </el-input>
          <div>
            <Editor id="tinymce" v-model="teaItemInfo.teaDetails" :init="init"></Editor>
          </div>
          <div class="release-tea-place">
            <div class="release-tip">您的地区</div>
            <el-cascader
                :options="options"
                v-model="selectedOptions"
                @change="handleChange"
                :separator="' '"
                style="width: 90%;"
            >
            </el-cascader>
          </div>
          <div class="release-tea-container-picture">
            <div class="release-tea-container-picture-title">上传照片</div>

            <el-upload
                action="http://localhost:9321/file/"
                :on-preview="fileHandlePreview"
                :on-remove="fileHandleRemove"
                :on-success="fileHandleSuccess"
                :show-file-list="showFileList"
                :limit="10"
                :on-exceed="handleExceed"
                accept="image/*"
                drag
                multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <div class="picture-list">
              <el-image style="width: 600px;height:400px; margin-bottom: 2px;" fit="contain"
                        v-for="(img,index) in imgList" :src="$store.state.baseApi + img"
                        :preview-src-list="imgList" :key="index"></el-image>
            </div>
            <el-dialog :visible.sync="imgDialogVisible">
              <img width="100%" :src="$store.state.baseApi + dialogImageUrl" alt="">
            </el-dialog>
          </div>
          <div style="display: flex;justify-content: center;margin-top: 30px;margin-bottom: 30px;">
            <el-button type="primary" plain @click="releaseButton"> 确认发布</el-button>
          </div>
        </div>
      </div>
      <app-foot></app-foot>
    </app-body>
  </div>
</template>

<script>
import AppHead from '../common/AppHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'
import options from '../common/country-data.js'


export default {
  name: "release",
  components: {
    AppHead,
    AppBody,
    AppFoot
  },
  data() {
    return {
      imgDialogVisible: false,
      dialogImageUrl: '',
      showFileList: true,
      options: options,
      selectedOptions: [],
      options2: [],
      imgList: [],
      teaItemInfo: {
        teaName: '',
        teaDetails: '',
        pictureList: '',
        teaPrice: 0,
        teaPlace: '',
        teaLabel: '12'
      },
      videoUrl: '',
      value: '',
      contenyt: {},
      init: {
        language_url: "/zh_CN.js", // 语言包位置，因为放在public下所以可以省略public
        selector: "#tinymce", //tinymce的id
        language: "zh_CN", //语言类型
        skin_url: "/skins/ui/oxide",
        height: 500, //编辑器高度
        browser_spellcheck: true, // 拼写检查
        paste_data_images: true, // 允许粘贴图像
        plugins: "image link code table lists wordcount",
        branding: false, //是否禁用“Powered by TinyMCE”
        toolbar: "fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen", //工具栏
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
      }
    };
  },
  methods: {
    listType() {
      this.$api.listType({begin: 0, size: 999}).then((res) => {
        for (var i = 0; i < res.data.length; ++i) {

          this.options2.push({
            value: res.data[i].id,
            label: res.data[i].name
          })
        }
      })
    },
    handleChange(value) {
      console.log(value);
      this.teaItemInfo.teaPlace = value[1];
    },
    fileHandleRemove(file, fileList) {
      console.log(file, fileList);
      for (let i = 0; i < this.imgList.length; i++) {
        if (this.imgList[i] === file.response.data) {
          this.imgList.splice(i, 1);
        }
      }
    },
    fileHandlePreview(file) {
      console.log(file);
      this.dialogImageUrl = file.response.data;
      this.imgDialogVisible = true;
    },
    fileHandleSuccess(response, file, fileList) {
      console.log("file:", response, file, fileList);
      this.imgList.push(response.data);
    },
    releaseButton() {
      this.teaItemInfo.pictureList = JSON.stringify(this.imgList);
      console.log(this.teaItemInfo);
      if (this.teaItemInfo.teaName &&
          this.teaItemInfo.teaDetails &&
          this.teaItemInfo.teaPlace &&
          this.teaItemInfo.teaLabel) {
        this.$api.addteaItem(this.teaItemInfo).then(res => {
          if (res.status_code === 1) {
            this.$message({
              message: '发布成功！',
              type: 'success'
            });
            console.log(res.data);
            this.$router.replace({path: '/details', query: {id: res.data.id}});
          } else {
            this.$message.error('发布失败！' + res.msg);
          }
        }).catch(e => {
          this.$message.error('请填写完整信息');
        })
      } else {
        this.$message.error('请填写完整信息！');
      }

    },
    handleExceed(files, fileList) {
      this.$message.warning(`限制10张图片，本次选择了 ${files.length} 张图，共选择了 ${files.length + fileList.length} 张图`);
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.videoUrl = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    }
  },
  mounted() {
    this.listType();
    tinymce.init({});
  }
}
</script>

<style scoped>
.release-tea-container {
  min-height: 85vh;
}

.release-tea-container-title {
  font-size: 18px;
  padding: 30px 0;
  font-weight: 600;
  width: 100%;
  text-align: center;
}

.release-tea-container-form {
  padding: 0 180px;
}

.release-tea-detiles-text {
  margin: 20px 0;
}

.release-tea-place {
  margin-bottom: 15px;
}

.release-tip {
  color: #555555;
  float: left;
  padding-right: 5px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}

.release-tea-container-picture {
  width: 500px;
  height: 400px;
  margin: 20px 0;

}

.release-tea-container-picture-title {
  margin: 10px 0;
  color: #555555;
  font-size: 14px;
}

.picture-list {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100px;
}
</style>